<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="telephone=no" name="format-detection">
		<title><%= @title %></title>
		<link href="//cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
		<link href="//cdn.bootcss.com/weui/0.4.0/style/weui.min.css" rel="stylesheet">
		<style>
			.swiper-container {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				max-width: 640px;
			}
			.swiper-wrapper {
				margin: 0 auto;
			}
			
			.swiper-container-horizontal > .swiper-pagination-bullets {
				bottom: 0;
				height: 16px;
				background-color: #222;
				background-size: cover;
				padding-top: 7px;
			}
			
			.swiper-pagination-bullet {
				background-color: #BBB;
			}
			
			.swiper-pagination-bullet-active {
				background-color: rgba(241,125,108,1);
			}
			
			.swiper-slide {
				margin: 0 auto;
				text-align: center;
			}
			
			.swiper-slide img.cover {
				max-height: 72%;
				margin: 0 auto;
			}
			
			.swiper-slide .player {
				height: 10%;
				width: 96%;
				position: absolute;
				top: 72%;
				left: 2%;
				margin: 6px auto;
				background-color: #F8F8F8;
				border: solid 1px #DDD;
				z-index: 1;
			}
			
			.swiper-slide .player .mini-cover {
				height: 100%;
				position: absolute;
				left: 0;
				z-index: 1;
			}
			
			.swiper-slide .player .mini-cover:before {
				position: absolute;
				content: "";
				left: 0;
				top: 0;
				width: 80px;
				height: 80px;
				z-index: 2;
				background-color: rgba(77,156,45,0.25);
			}
			
			.swiper-slide .player .play-button {
				height: 60%;
				position: absolute;
				left: 16px;
				top: 20%;
				z-index: 3;
			}
			
			.swiper-slide .player .pause-button {
				height: 60%;
				position: absolute;
				left: 16px;
				top: 20%;
				z-index: 3;
				display: none;
			}
			
			.swiper-slide .player .title {
				position: absolute;
				font-size: 16px;
				left: 75px;
				top: 3px;
				color: #333;
			}
			
			.swiper-slide .player .info {
				position: absolute;
				font-size: 13px;
				left: 75px;
				top: 28px;
				color: #666;
			}
			
			.swiper-slide .vote-button {
				position: absolute;
				bottom: 48px;
				left: 50%;
				width: 100px;
				margin-left: -50px;
				font-size: 16px;
				color: #FFFFFF;
				background-color: rgba(241,125,108,1);
				border: solid 2px #FFF;
				box-shadow: #C7C7CC 0 2px 2px 0;
				padding: 3px 15px;
				border-radius: 20px;
			}
			
			.swiper-slide .voted-button {
				position: absolute;
				bottom: 48px;
				left: 50%;
				width: 140px;
				margin-left: -70px;
				font-size: 16px;
				color: #FFFFFF;
				background-color: #888;
				border: solid 2px #FFF;
				box-shadow: #C7C7CC 0 2px 2px 0;
				padding: 3px 15px;
				border-radius: 20px;
			}
			
			.swiper-slide .vote-info {
				position: absolute;
				bottom: 34px;
				text-align: center;
				width: 100%;
				font-size: 13px;
				color: #444;
			}
			
			.swiper-slide span {
				position: absolute;
				margin: 0 auto;
				bottom: 27px;
				left: 50%;
				width: 100px;
				margin-left: -50px;
				font-size: 14px;
				font-weight: 700;
				color: #777;
				text-align: center;
			}
			
			.danmu-wapper {
				position: absolute;
				bottom: 23px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container" id="slider"></div>
		<div id="danmu"></div>
		<div class="weui_dialog_alert" id="welcome_alert">
   			<div class="weui_mask"></div>
   			<div class="weui_dialog">
   				<% if ["uibe", "by", "mz", "bk", "bh", "bj"].include? params[:code] %>
       			<div class="weui_dialog_hd"><strong class="weui_dialog_title">收听须知</strong></div>
       			<div class="weui_dialog_bd">
       				本次十佳歌手展示由<br />
       				<img src="http://fanhe-photo.b0.upaiyun.com/voter/<%= params[:code] %>%26xnm.png" alt="北科大 × 小南门" style="width: 80%;" /><br />
       				共同发起<br />
       				微信回复选手姓名收听完整曲目
       			</div>
       			<% else %>
       			<div class="weui_dialog_hd"><strong class="weui_dialog_title">投票须知</strong></div>
       			<div class="weui_dialog_bd">
       				本次人气投票由<br />
       				<img src="http://fanhe-photo.b0.upaiyun.com/voter/<%= params[:code] %>%26xnm.png" alt="北科大 × 小南门" style="width: 80%;" /><br />
       				共同发起<br />
					你有3票投给你最喜欢的选手<br />
					投票通道将在决赛所有曲目表演完毕后关闭
       			</div>
       			<% end %>
       			<div class="weui_dialog_ft">
           			<a class="weui_btn_dialog primary alert-confirm">确定</a>
       			</div>
       		</div>
       	</div>
       	<div class="weui_dialog_alert" id="message_alert" style="display: none">
   			<div class="weui_mask"></div>
   			<div class="weui_dialog">
       			<div class="weui_dialog_hd"><strong class="weui_dialog_title" id="alert-message-title">南门大爷：</strong></div>
       			<div class="weui_dialog_bd" id="alert-message-content">
       				你的3次投票机会已用完，快召集其他朋友给你喜欢的歌手投票吧！
       			</div>
       			<div class="weui_dialog_ft">
         			<a class="weui_btn_dialog primary alert-confirm">确定</a>
       			</div>
       		</div>
       	</div>
		
		<script id="slider-tpl" type="text/html">
			<div class="swiper-wrapper">
				{{ each sliders }}
				<div class="swiper-slide" id="{{ $value.code }}">
					<img class="cover" src="http://fanhe-photo.b0.upaiyun.com/voter/images/{{ $value.code }}.jpg!voteCover" />
					<div class="player">
						<img class="mini-cover" src="http://fanhe-photo.b0.upaiyun.com/voter/images/{{ $value.code }}.jpg!squarePreview" />
						<img class="play-button" data-id="song-{{ $value.code }}" src="http://fanhe-photo.b0.upaiyun.com/voter/icon-pause.png" />
						<img class="pause-button" data-id="song-{{ $value.code }}" src="http://fanhe-photo.b0.upaiyun.com/voter/icon-play.png" />
						<audio id="song-{{ $value.code }}" src="http://fanhe-photo.b0.upaiyun.com/voter/songs/{{ $value.code }}.mp3"></audio>
						<p class="title">{{ $value.song }} - {{ $value.name }}</p>
						<p class="info">{{ $value.info }}</p>
					</div>
					<% if ["uibe", "by", "mz", "bk", "bh", "bj"].include? params[:code] %>
					<div class="vote-info">
						<p>票数：{{ $value.count }}</p>
						<p>关注公众账号“小南门内参”</p>
						<p>回复选手姓名收听完整歌曲</p>
					</div>
					<% else %>
					<button data-id="{{ $value.id }}" class="vote-button">投 票</button>
					<span id="count-{{ $value.id }}">票数：{{ $value.count }}</span>
					<% end %>
				</div>
				{{ /each }}
			</div>
			<div id="danmu_bar" class="danmu-wapper weui_search_bar" style="display: none">
        		<form class="weui_search_outer">
            		<div class="weui_search_inner" style="padding-left: 10px">
                		<input type="search" required="" placeholder="北科十佳加油" maxlength="20" id="danmu_input" class="weui_search_input">
            		</div>
            		<label id="danmu_text" class="weui_search_text" for="danmu_input">
                		<span>点击输入弹幕</span>
            		</label>
        		</form>
        		<a id="danmu_push" class="weui_search_cancel" href="javascript:">发布</a>
    		</div>
			<div class="swiper-pagination"></div>
		</script>

		<script src="http://fanhe-photo.b0.upaiyun.com/voter/template.js"></script>
		<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
		<script src="http://fanhe-photo.b0.upaiyun.com/voter/jquery.danmu.min.js"></script>
		<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<script src="//cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
		<script src="https://cdn1.lncld.net/static/js/av-mini-0.6.4.js"></script>
		<script>
			AV.initialize('QQuBwCwSiNjAIFMujpaqqEPS-gzGzoHsz', 'QGgCVO9zJCYIal5qKrpPBLDl');
			var query = new AV.Query('Vote');
			query.equalTo('code', '<%= params[:code] %>');
			query.addAscending('index')
			query.find().then(function(results) {
				var sliders = [];
  				console.log('Successfully retrieved ' + results.length + ' posts.');
  				// 处理返回的结果数据
  				for (var i = 0; i < results.length; i++) {
    				var ele = results[i];
    				sliders.push({
						id: ele.id,
						index: ele.get('index'),
						name: ele.get('name'),
						info: ele.get('info'),
						song: ele.get('song'),
						code: ele.get("code") + '-' + ele.get("index"),
						count: ele.get("voteCount")
					});
  				}
  				var slider_html = template('slider-tpl', {
					sliders: sliders,
				});
				$("#slider").html(slider_html);
				var voter = new Swiper ('.swiper-container', {
    				direction: 'horizontal',
    				mousewheelControl : true,
    				loop: false,
        			pagination: '.swiper-pagination',
  				});
  				
  				$(".play-button").click(function(){
  					var id = this.getAttribute('data-id');
  					var audio = document.getElementById(id);
  					$("audio").each(function(){
    					this.pause();
    					$(this).siblings(".pause-button").hide();
    					$(this).siblings(".play-button").show();
  					});
  					audio.play();
  					$(this).hide();
  					$(this).siblings("audio").addClass("playing");
  					$(this).siblings(".pause-button").show();
  				});
  				$(".pause-button").click(function(){
  					var id = this.getAttribute('data-id');
  					var audio = document.getElementById(id);
  					audio.pause();
  					$(this).hide();
  					$(this).siblings("audio").removeClass("playing");
  					$(this).siblings(".play-button").show();
  				});
  				$(".vote-button").click(function(){
  					if ($.cookie('bk_plus_voted') == 0) {
  						$("#message_alert").show();
  						return false;
  					}
  					var id = this.getAttribute('data-id');
  					var Vote = AV.Object.extend('Vote');
					var query = new AV.Query(Vote);

					query.get(id).then(function(vote) {
						vote.fetchWhenSave(true);
						vote.increment('voteCount');
  						vote.save();
  						$("#count-" + id).text("票数：" + vote.get("voteCount"));
  						if (!$.cookie('bk_plus_voted')) {
  							$.cookie('bk_plus_voted', 3);
  						};	
  						var count = $.cookie('bk_plus_voted');
  						count -= 1
  						$.cookie('bk_plus_voted', count); 
  						if (count > 0) {
  							$("#alert-message-title").html("感谢投票！");
  							$("#alert-message-content").html("你还有宝贵的" + count + "票");
  						} else {
  							$("#alert-message-title").html("感谢投票！");
  							$("#alert-message-content").html("你的3次投票机会已用完，快召集其他朋友给你喜欢的歌手投票吧！");
  							$(".vote-button").addClass("voted-button");
  							$(".voted-button").removeClass("vote-button");
  							var Check = AV.Object.extend('VoteCheck');
  							var check = new Check();
  							check.set("code", "<%= params[:code]%>");
  							check.set("user", "<%= params[:user] %>");
  							check.save();
  							//$(".vote-button").hide();
  							//$(".vote-count").hide();
  							//$("#danmu_bar").fadeIn();
  						}
  						$("#message_alert").show();
  					});
  				});
  				$(".voted-button").click(function(){
  					$("#vote_alert").show();
  				});
  				$(".alert-confirm").click(function(){
  					$(".weui_dialog_alert").fadeOut();
  				});
  				$(".alert-confirm").on("touchend", function(){
  					$(".weui_dialog_alert").fadeOut();
  				});
  				if ($.cookie('bk_plus_voted') == 0) {
  					$(".vote-button").addClass("voted-button");
  					$(".voted-button").removeClass("vote-button");
  				}
			}, function(error) {
  				console.log('Error: ' + error.code + ' ' + error.message);
			});
			//弹幕初始化
  			$("#danmu").danmu({
				height: "30%",  //弹幕区高度
				width: "100%",   //弹幕区宽度
				zindex : 3,   //弹幕区域z-index属性
				speed: 15000,
				danmuLoop: true,
			});
			$('#danmu').danmu('danmuStart');
			var dquery = new AV.Query('Danmu');
			dquery.limit(100);
			dquery.containedIn('user', ["sys", "<%= params[:code] %>"]);
			dquery.find().then(function(results) {
  				console.log('Successfully retrieved ' + results.length + ' danmu.');
  				for (var i = 0; i < results.length; i++) {
    				var ele = results[i];
    				var time = parseInt(1500 * Math.random())
    				$("#danmu").danmu("addDanmu",{ text: ele.get("content"), color:"white", size:0, position:0, time: time});
				}
			}, function(error) {
  				console.log('Error: ' + error.code + ' ' + error.message);
			});
			//投票检查
			if ($.cookie('bk_plus_voted') != 0) {
				var cquery = new AV.Query('VoteCheck');
				cquery.equalTo('code', '<%= params[:code] %>');
				cquery.equalTo('user', '<%= params[:user] %>');
				cquery.equalTo('votedFrom', 'wechat');
				cquery.first().then(function(obj) {
					if (obj) {
						$.cookie('bk_plus_voted', 0)
						$(".vote-button").addClass("voted-button");
  						$(".voted-button").removeClass("vote-button");
					}
				}, function(error) {
  					console.log('Error: ' + error.code + ' ' + error.message);
				});
			}
  		</script>
  		<div style="display: none">
			<script src="http://s11.cnzz.com/z_stat.php?id=1254818792&web_id=1254818792" language="JavaScript"></script>
		</div>
	</body>
</html>
